<template>
	<div class="box">
		a:{{ box?.a }}
		b:{{ box?.b }}
		c:{{ box?.c }}
		computedC : {{ box?.computedC }}
	</div>
	<Row>
		animateNum : {{ box.animateNum }}
	</Row>
	<Row>
		emptyObj : {{ box.emptyObj?.a }}
	</Row>
	<Form ref="myForm" :model="box.form" :rules="box.rules" inline :label-width="100">
		<FormItem label="栏目1" prop="a">
			<Input v-model="box.form.a" placeholder=""></Input>
		</FormItem>
		<FormItem label="栏目2" prop="b">
			<Input v-model="box.form.b" placeholder=""></Input>
		</FormItem>
		<FormItem label="栏目3" prop="c">
			<Input v-model.number="box.form.c" placeholder=""></Input>
		</FormItem>
		<FormItem label="">
			<Button type="default" @click="submit">操作</Button>
		</FormItem>
	</Form>
	<Row>
		<Checkbox v-model="item.selected" v-for="(item, index) in box.list">{{ item.name }}</Checkbox>
	</Row>
	<Row>
		<CheckboxGroup v-model="box.selectList">
			<Checkbox :label="item" v-for="(item, index) in box.list">{{ item.name }}</Checkbox>
		</CheckboxGroup>
	</Row>
	<Tabs v-model="box.tabIndex" @on-click="onTabClick">
		<TabPane v-for="(item, index) in box.tabs" :name="item.id" :label="item.name">
			{{ item.name }}
		</TabPane>
	</Tabs>
	<Button type="default" @click="add">操作</Button>
	<Button type="default" @click="add2">操作2</Button>
	<Row>
		<Switch :true-value="1" :false-value="0" v-model="box.switch"></Switch>
		<mySwitch v-model:value="box.switch">
			<!-- <template #open>open</template>
<template #close>close</template> -->
		</mySwitch>
	</Row>
</template>
<script>
import { Box } from './251015.test';
import mySwitch from './251015.switch.vue'
export default {
	components: {
		mySwitch
	},
	name: 'Test',
	data() {
		return {
			box: new Box()
		}
	},
	watch: {
		'box.emptyObj.a': {
			handler(newValue, oldValue) {
				console.log('emptyObj.a', newValue, oldValue);
			}
		}
	},
	mounted() {
		//这里执行一些初始化的运作
		this.box.init(this);
	},
	methods: {
		onTabClick(e) {
			console.log(e);
		},
		submit() {
			this.$refs['myForm'].validate((valid) => {
				console.log(`valid`, valid);
				if (valid) {

				}
			});
		},
		add() {
			setTimeout(() => {
				this.box.a++;
				console.log(this.box.a);
			}, 1e3);
		},
		add2() {
			console.log('list', this.box.list);
			console.log('selectList', this.box.selectList);
		}
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>